<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品分类页</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body class="grey">
		<a id="backToTop" href="javascript:;">↑</a>
		<!--header-->
		<div class="headerBar">
			<div class="topBar">
				<div class="comWidth">
					<div class="leftArea">
						<a href="#" class="collection">收藏XX</a>
					</div>
					<div class="rightArea">
						欢迎来到XX网！
						<a href="#">[登录]</a>
						<a href="./register.html">[注册]</a>
					</div>
				</div>
			</div>
			<div class="logoBar">
				<div class="comWidth">
					<div class="logo fl">
						<a href="#">
							
						</a>
					</div>
					<div class="searchBox fl">
						<input type="text" class="searchText fl" />
						<input type="button" value="搜索" class="searchMenu fr" />
					</div>
					<div class="shopCar fr">

						<span class="shopText fl">购物车</span>

						<span class="shopNum fl">0</span>
					</div>

				</div>
			</div>

			<div class="navBox clearfix">
				<div class="comWidth">
					<div class="shopClass fl ">
						<h3>全部商品分类<i></i></h3>
					</div>
					<ul class="nav fl">
						<li class="active">
							<a href="#">数码城</a>
						</li>
						<li>
							<a href="#">秒杀</a>
						</li>
						<li>
							<a href="#">团购</a>
						</li>
						<li>
							<a href="#">发现</a>
						</li>
						<li>
							<a href="#">海外购</a>
						</li>
						<li>
							<a href="#">特卖</a>
						</li>
					</ul>
				</div>
				<!--comWidth-->

			</div>

		</div>

		<div class="userPosition comWidth">
			<a href="#"> 手机/数码/配件>手机通讯</a>
			<span>&nbsp;&gt;&nbsp;</span>
			<a href="#"> 手机</a>
			<span>&nbsp;&gt;&nbsp;</span>
			<a href="#"> 手机/数码/配件>手机通讯</a>
			<span>&nbsp;&gt;&nbsp;</span>
			<a href="#"> 苹果(Apple)</a>
			<span>&nbsp;&gt;&nbsp;</span>
			<em>苹果(Apple)A1660手机</em>
		</div>
		<!--description_info-->
		<div class="descripion_info comWidth">
			<div class="description clearfix">
				<div class="leftArea">
					<div class="description_imgs">
						<div class="bigImg" id="box">
							<img id="bigImg" src="img/description/description_img01.jpg" />
							<div id="mark" style="display: none"></div>
						</div>
						<div id="bigBox">
							<img src="img/description/description_img01.jpg" />
						</div>
						
						<div class="smallImg ">
							<ul id="smallImg">
								<li class="des_active smallImg_select">
									<img src="img/description/description_img01.jpg" /></a>
								</li>
								<li>
									<img src="img/description/description_img02.jpg" />
								</li>
								<li>
									<img src="img/description/description_img03.jpg" />
								</li>
								<li>
									<img src="img/description/description_img04.jpg" />
								</li>
								<li>
									<img src="img/description/description_img05.jpg" />
								</li>
							</ul>
						</div>

					</div>
				</div>
				<div class="rightArea">
					<div class="des_content">
						<h3>Apple iPhone 7 32GB 黑色 移动联通电信4G手机</h3>
						<div class="dl clearfix">
							<div class="dt">参考价</div>
							<div class="dd des_price"><em>¥</em>4398.00</div>
						</div>
						<div class="bg_grey">
							<div class="dl clearfix">
								<div class="dt">送至</div>
								<div class="dd des_location">
									<select>
										<option>北京市 海淀区 五环内</option>
									</select><span>有货，可当日出库</span> </div>
							</div>

							<div class="dl clearfix">
								<div class="dt">选择颜色</div>
								<div class="dd clearfix">
									<div class="des_item des_item_active">亮黑色</div>
									<div class="des_item">玫瑰金色</div>
									<div class="des_item">红色</div>
									<div class="des_item">金色</div>
									<div class="des_item">银色</div>
								</div>

							</div>

							<div class="dl  clearfix ">
								<div class="dt ">选择规格</div>
								<div class="dd clearfix ">
									<div class="des_item des_item_active select_small">全网通128G</div>
									<div class="des_item select_small">全网通256G</div>
									<div class="des_item select_small">全网通32G</div>
									<div class="des_item select_small">双网通128G</div>
									<div class="des_item select_small">双网通256G</div>
								</div>
							</div>
							<div class="dl  clearfix ">
								<div class="dt ">购买方式</div>
								<div class="dd clearfix ">
									<div class="des_item des_item_active select_small">裸机</div>
									<div class="des_item select_small">裸机+4500MB流量</div>
									<div class="des_item select_small">电信老用户赠费</div>
									<div class="des_item select_small">移动老用户赠费</div>
								</div>
							</div>

						</div>
						<!--购物车-->
						<div class="des_shop_bar">
							<div class="des_purchase">立即购买</div>
							<div class="des_add"><span></span>加入购物车</div>
						</div>
					</div>

				</div>
				<!--description_info end-->
			</div>
		</div>

		<!--下面的详情-->
		<div class="hr_15"></div>
		<div class="des_info comWidth clearfix">
			<div class="leftArea">
				<div class="recommend_tit">
					<ul id="tabUl">
						<li class="li_select">
							同价位
						</li>
						<li>
							同品牌
						</li>
					</ul>
				</div>
				<div class="recommend select">
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/3FItem01.jpg"> </a>
						</div>

						<h3>小米爆款8.18元秒</h3>
						<p>最高立省500元</p>
					</div>
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/3FItem02.jpg"> </a>
						</div>
						<h3>华为爆款</h3>
						<p>最高立省800元</p>
					</div>
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/3FItem03.jpg"> </a>
						</div>
						<h3>iPhone 6 32G金色</h3>
						<p>低至2299元</p>
					</div>
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/3FItem04.jpg"> </a>
						</div>
						<h3>荣耀爆款</h3>
						<p>最高立省1000元</p>
					</div>
				</div>
				<!--另一组-->
				<div class="recommend ">
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/description/description06.jpg"> </a>
						</div>

						<h3>苹果/APPLE iPhone6splus</h3>
						<p>最高立省500元</p>
					</div>
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/description/description10.jpg"> </a>
						</div>
						<h3>苹果/APPLE iPhone SE</h3>
						<p>低至2369.00</p>
					</div>
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/description/description08.jpg"> </a>
						</div>
						<h3>iPhone 6 32G金色</h3>
						<p>低至2299元</p>
					</div>
					<div class="shopItem">
						<div class="shopImg">
							<a href="#"><img src="img/description/description09.jpg"> </a>
						</div>

						<h3>iPhone 7个性手机 高端手机</h3>
						<p>¥8888.00</p>
					</div>
				</div>
			</div>
			<div class="rightArea">
				<div class="des_info_cont">
					<ul class="des_tit">
						<li class="des_tit_active">商品详情</li>
						<li>包装及参数</li>
						<li>评价</li>
						<li>咨询</li>
						<li>售后保障</li>
					</ul>
					<div class="des_img">
						<img src="img/description/des_info.jpg" />
					</div>
				</div>
			</div>
		</div>
		<div class="footer clearfix">
			<p>
				<a href="#">XX简介</a><i>|</i>
				<a href="#">XX公告</a><i>|</i>
				<a href="#">招纳贤士</a><i>|</i>
				<a href="#">联系我们</a>
			</p>
			<p>Copyright © 2006 - 2014 XX版权所有 京ICP备09037834号 京ICP证B1034-8373号 某市公安局XX分局备案编号：123456789123</p>
			<div class="footerImg">
				<img src="img/footer01.jpg" />
			</div>
		</div>
		<!--script-->
		<script type="text/javascript" src="js/utils.js"></script>
		<script type="text/javascript" src="js/main.js"></script>

	</body>

</html>